<template>
  <div class="question-detail" style="padding:20px 20px 20px 20px;">
    <el-row :gutter="24">
      <el-col :span="6">
        <vxe-table
          ref="xTable"
          :align="'left'"
          :data="questionList"
          :edit-config="{trigger: 'click', mode: 'cell'}"
          highlight-current-row
          highlight-hover-row
          border
          round
          resizable
          show-overflow
          size="mini"
          :height="height"
          @cell-click="handleCellClick"
        >
          <vxe-table-column field="questionId" title="问卷ID" width="60" />
          <vxe-table-column field="questionCaption" title="问卷名称" />
          <vxe-table-column field="createTimeFormat" title="创建时间" width="100" />
        </vxe-table>
      </el-col>
      <el-col :span="18">
        <vxe-table
          ref="xTable"
          :align="'center'"
          :data="answerMainList"
          :edit-config="{trigger: 'click', mode: 'cell'}"
          highlight-current-row
          highlight-hover-row
          border
          round
          resizable
          show-overflow
          size="mini"
          :height="height"
        >
          <vxe-table-column field="mainId" title="答卷ID" width="60" />
          <vxe-table-column field="mainIp" title="IP地址" width="200" />
          <vxe-table-column field="mainTimeFormat" title="回答时间" width="140" />
          <vxe-table-column field="browserName" title="浏览器名称" width="120" />
          <vxe-table-column field="operatingSystemName" title="操作系统名称" width="140" />
          <vxe-table-column title="操作">
            <template #default="{ row }">
              <vxe-button icon="vxe-icon--edit-outline" status="primary" @click="handleQueryDetail(row)">查看明细</vxe-button>
            </template>
          </vxe-table-column>
        </vxe-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getQuestionListByUserCode } from '@/api/questionnaire'
import { getAnswerMainListByQuestionId } from '@/api/answer'
const moment = require('moment')
export default {
  data() {
    return {
      height: (window.innerHeight - 130) + 'px',
      questionList: [],
      answerMainList: []
    }
  },
  mounted: function() {
    const that = this
    getQuestionListByUserCode({
      userCode: this.$store.state.user.name
    }).then(res => {
      const all = res.data.sort(function(a, b) {
        return b.createTime < a.createTime ? -1 : 1
      })
      all.forEach(aa => {
        aa.createTimeFormat = moment(aa.createTime).format('YYYY-MM-DD')
      })
      // 按照时间排序
      that.questionList = all.filter(k => k.deleteStatus !== '1')
    })
  },
  methods: {
    handleQueryDetail(row) {
      const { href } = this.$router.resolve({
        name: 'questionShow',
        query: { questionId: row.questionId, status: 'display', mainId: row.mainId }
      })
      window.open(href, '_blank')
    },
    handleCellClick({ row }) {
      const that = this
      getAnswerMainListByQuestionId({
        questionId: row.questionId
      }).then(res => {
        if (res.data) {
          res.data.forEach(bb => {
            bb.mainTimeFormat = moment(bb.mainTime).format('YYYY-MM-DD HH:mm:ss')
          })
          that.answerMainList = res.data
        }
      })
    }
  }
}
</script>
